import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import React, { useEffect, useState } from 'react'
import CImage from '../CImage/index'
import './index.scss'

interface ICard {
  courseName?: string
  questionName?: string
  courseImg?: string
  questionImg?: string
  courseSubtitle?: string
  questionSubtitle?: string
  price?: number
  testNumber?: number
  personsName?: string
  type?: string
}

/**
 * 共用 list 组件
 * @param ticourseNametle 标题 默认 ''
 * @param courseSubtitle  信息描述 默认 ''
 * @param price 价格
 * @param personsNum 人数
 * @param personsName 人名字
 * @param courseImg 图片
 * @param type 类型 底部显示
 * @return JSX.Element
 */
export default function CCard(params: ICard) {
  const storagesystem = Taro.getStorageSync('system')
  const [system] = useState(storagesystem)

  const {
    courseName = '',
    questionName = '',
    courseSubtitle = '',
    questionSubtitle = '',
    courseImg = '',
    questionImg = '',
    price = '',
    testNumber = 0,
    type = '',
    personsName = '',
  } = params

  return (
    <View className='content_1'>
      <View>
        <CImage src={courseImg || questionImg}></CImage>
      </View>
      <View>
        <Text className='title'>{courseName || questionName}</Text>
      </View>
      <View className='subtitle'>
        <Text className='noto'>{courseSubtitle || questionSubtitle}</Text>
      </View>

      {type ? (
        <View>
          <Text className='persons'>{personsName}</Text>
          {system.indexOf('iOS') < 0 ? (
            <Text className='price_2'>{price ? '￥' + price : '免费'}</Text>
          ) : (
            <Text className='price_2'>免费</Text>
          )}
        </View>
      ) : (
        <View>
          {system.indexOf('iOS') < 0 ? <Text className='price'>{price ? '￥' + price : '免费'}</Text> : <Text className='price'>免费</Text>}

          <Text className='personsNum'>{testNumber}人已测</Text>
        </View>
      )}
    </View>
  )
}
